<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>2使用BFC方法</title>
    <style type="text/css">
      body {
        margin: 0;padding: 0;
      }
      #main-content { background: gray; }
      .sub {
        width: 190px;
        float: left;
        margin-right: 10px;

        background:#faa;
      }
      .main{
        /*纯粹是为了创建BFC：*/
        overflow: hidden;
        background:#afa;
      }
      .extra {
        width: 230px;
        float: right;
        margin-left: 10px;

        background:#aaf;
      }
      /*简单演示闭合浮动：*/
      .clearfix:before, .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
      }
      .clearfix:after {
        clear: both;
      }
      .clearfix {
        *zoom: 1;
      }
      /*修饰样式，可不写：*/
      .main, .sub, .extra {
        min-height: 30px;
      }
    </style>
  </head>
  <body>
    <div id="main-content" class="clearfix">
      <div class="sub">sub</div>
      <div class="extra">extra</div>
      <div class="main">
        使用BFC方法实现三栏式布局，对main栏用的是overflow: hidden<br>
        main栏的BFC是为了让两边浮动元素的margin生效
      </div>
    </div>
  </body>
</html>